<template>
    <div class="album">
      <div class="album-title">
        <span>热门新碟</span>
      </div>
      <div class="album-table">
        <el-row v-for="(row, index) in hotrows" :key="index" :gutter="16">
          <el-col :span="4" v-for="item of row" :key="item.id">
            <div class="album-item">
              <a :href="'/albumInfo?id='+ item.id" target="_blank">
                <img class="album-mask" src="/imgs/album.png">
                <img class="album-img" :src="item.picture.resourcePath" />
              </a>
              <a class="album-name" :href="'/albumInfo?id='+ item.id" target="_blank">{{ item.name }}</a>
              <div v-if="item.combinations.length != 0">
                <a :href="'/combinationInfo?id='+ inneritem.id" v-for="inneritem in item.combinations" :key="inneritem.id">{{ inneritem.name }}</a>
              </div>
              <div v-else>
                <a :href="'/singerInfo?id='+ inneritem.id" v-for="inneritem in item.singers" :key="inneritem.id">{{ inneritem.chinesename }}</a>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <div class="album-title">
        <span>全部新碟</span>
        <div class="album-family">
          <span @click="updateAlbumData('a')">全部</span><span class="line">|</span>
          <span @click="updateAlbumData('chA')">华语</span><span class="line">|</span>
          <span @click="updateAlbumData('westA')">欧美</span><span class="line">|</span>
          <span @click="updateAlbumData('japKorA')">日韩</span>
        </div>
      </div>
      <div class="album-table">
        <el-row v-for="(row, index) in rows" :key="index" :gutter="16">
          <el-col :span="4" v-for="item of row" :key="item.id">
            <div class="album-item">
              <a :href="'/albumInfo?id='+ item.id" target="_blank">
                <img class="album-mask" src="/imgs/album.png">
                <img class="album-img" :src="item.picture.resourcePath" />
              </a>
              <a class="album-name">{{ item.name }}</a>
              <div v-if="item.combinations.length != 0">
                <a :href="'/combinationInfo?id='+ inneritem.id" v-for="inneritem in item.combinations" :key="inneritem.id">{{ inneritem.name }}</a>
              </div>
              <div v-else>
                <a :href="'/singerInfo?id='+ inneritem.id" v-for="inneritem in item.singers" :key="inneritem.id">{{ inneritem.chinesename }}</a>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
</template>

<script type="module">
var albums = [];
module.exports = {
  data: function() {
    return {
      albumdata:[],
      hotalbum:[],
      albumType: ''
    }
  },
  methods: {
    getAlbumData() {
      $.ajax({
        url: "/albumLists",
        type: "get",
        dataType: "json",
        async: false,
        success(data) {
          console.log(data);
          albums = data.albums;
        }
      });
      this.albumdata = albums;
      var comparehot = function (x,y){
        if(x.heat < y.heat) return 1;
        else if(x.heat > y.heat) return -1;
        else return 0;
      };
      this.hotalbum = albums.sort(comparehot).slice(0, 12);
      // console.log(this.hotalbum);
    },
    updateAlbumData(type) {
      console.log(type);
      $.ajax({
        url: "/" + type + "lbumLists",
        type: "get",
        dataType: "json",
        async: false,
        success(data) {
          // console.log(data);
          albums = data.albums;
        }
      });
      this.albumdata.splice.call(this.albumdata, 0, this.albumdata.length, ...albums);
      // console.log(this.albumdata);
    }
  },
  computed: {
    rows() {
      const rows = [];
      this.albumdata.forEach((item, index) => {
        const row = Math.floor(index / 6)
        if (!rows[row]) {
          rows[row] = []
        }
        rows[row].push(item)
      })
      return rows
    },
    hotrows() {
      const rows = [];
      this.hotalbum.forEach((item, index) => {
        const row = Math.floor(index / 6)
        if (!rows[row]) {
          rows[row] = []
        }
        rows[row].push(item)
      })
      return rows
    },
  },
  mounted: function() {
    this.getAlbumData();
  }
}
</script>
